﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SinBiota.Model.Business.MapServices.Datatypes.AvailableTileLayers>" %>
<%@ Import Namespace="Localization" %>
<%@ Import Namespace="MvcMaps" %>    
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
    <%: Html.CheckBox("Minimap", new { onclick = "toggleMiniMap(this);"})%>Mostrar Mapa de Referência 
    |
    <a href="javascript:ShowDialog();">Mostrar Diálogo de Seleção de Camadas</a>
</p>
<%--<% Ajax.BingMap("map").CssClass("BingMap").Center(-22, -48).Zoom(6).Render(); %>--%>
<div id='mapDiv' class="BingMap"></div>

<div id="layercontroldialog">
<% var id = 0; %>
<% foreach (var layerGroup in Model.TileLayerGroups)
{ %>
    <fieldset class="layergroup">
    <legend><a href="javascript:toggleVisibility('group<%: id %>');"><%: layerGroup.Name %></a></legend> 
    <div id='group<%: id++ %>' class="toggle">
    <ul class="nobullet">
    <% foreach (var layer in layerGroup.Layers)
    { %>
         <li><img style="position:relative; bottom:4px;" 
         src="<%: Model.TileLayerServerURL%>?layer=<%: layer.Key %>&thumb=1"/><%: Html.CheckBox(layer.Key, new { onclick="toggleLayer(this, '"+layer.Key+"')"}) %> &nbsp;<label for='<%: layer.Key %>'><%:  layer.Name %></label></li>
    <% } %>
    </ul>
    </div>
    </fieldset>
<% } %>
</div>
<script type="text/javascript">
    var Layers = new Object;
    function toggleLayer(checkbox, layerid) {
        if (checkbox.checked) {
            var options = { uriConstructor: "http://scyllabioinfo.homelinux.com:9000/Sinbiota/Services/TileLayerServer.ashx?layer=" + layerid + "&quadkey={quadkey}", width: 256, height: 256 };
            var tileSource = new Microsoft.Maps.TileSource(options);
            var tileLayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity:0.7 });
            Layers[layerid] = tileLayer;
            map.entities.push(tileLayer);
        }
        else {
            map.entities.remove(Layers[layerid]);
        }
    }
    function toggleMiniMap(checkbox) {
        if (checkbox.checked) {
            map.ShowMiniMap(10, 240);
            AddMyControl();
        }
        else {
            map.HideMiniMap();
        }
    }
</script>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="<%: Url.Content("~/Scripts/Custom/BiotaAjaxFunctions.js")%>"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/Custom/jquery.emenu.js")%>"></script>

<script type="text/javascript">
    var map = null;
    var control = null;
    // Start up:
    $(document).ready(function () {
        //init map
        GetMap();
        // hide layer fields and start dialog:
        $(".toggle").each(function (idx, value) {
            $(value).hide();
        });
        $("#layercontroldialog").dialog({ maxHeight: 700, position: [10,10], title: '<%: Strings.Layers %>' });
    });
    function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                credentials: "Am0QRkG0DpHYfSodIsutev7J-PXGJFTBfLDsZ6fiUqGwvaS__DXIUaxc-0ldZIDm",
                enableClickableLogo: false, enableSearchLogo: false,
                center: new Microsoft.Maps.Location(-22.3, -48.6), zoom: 6,
            });
    }
    function ShowDialog() {
        $('#layercontroldialog').dialog();
    }
</script>

</asp:Content>
